<template>
	<div class="container d-flex flex-row justify-content-lg-between justify-content-center align-items-center row" style="height: 100%">
		<div class="d-block d-xl-none">
			<div class="header-right">
				<div class="mini-cart" @click="openDrawer">
					<i class="el-icon-menu mobile-menu-icon"></i>
				</div>
			</div>
		</div>
		<!-- d-none  -->
		<div class="d-xl-block" style="margin-left: 15px">
			<div class="row align-items-center">
				<div class="col-12">
					<div class="mainmenu">
						<nav>
							<ul class="ul-menu">
								<li v-for="item in menus" :key="item.colTitle">
									<a @click="enterPage(item)">{{ item.colTitle }}</a>
									<ul class="submenu" v-if="item.isShowChild">
										<li v-for="child in item.children" :key="child.colTitle">
											<a @click="enterPage(child)">{{ child.colTitle }}</a>
										</li>
									</ul>
								</li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
		<el-drawer :visible.sync="drawer" direction="ltr" size="50%" append-to-body @closeDrawer="drawer = false">
			<el-menu ref="menu" @select="selectMenu">
				<div v-for="item in menus" :key="item.colPath">
					<el-submenu v-if="item.children && item.children.length" :index="item.colId">
						<template slot="title">
							<span>{{ item.colTitle }}</span>
						</template>
						<el-menu-item v-for="child in item.children" :key="child.colPath" :index="child.colId">
							{{ child.colTitle }}
						</el-menu-item>
					</el-submenu>
					<el-menu-item v-else :index="item.colId">
						<span slot="title">{{ item.colTitle }}</span>
					</el-menu-item>
				</div>
			</el-menu>
		</el-drawer>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// menus: [{
			//     colTitle: '首页'
			// }, {
			//     colTitle: '党校建设'
			// }, {
			//     colTitle: '校园映像'
			// }, {
			//     colTitle: '师说红课'
			// }, {
			//     colTitle: '党校书架'
			// }, {
			//     colTitle: '行政架构',
			//     isShowChild: true,
			//     children: [
			//         {
			//             colTitle: '机关党建'
			//         },
			//         {
			//             colTitle: '党风廉政'
			//         }
			//     ]
			// }],
			drawer: false,
		}
	},
	computed: {
		menus() {
			return this.$store.getters.menus
		},
	},
	mounted() {},
	methods: {
		enterPage(item) {
			if (item.children && item.children.length) {
				return
			}
			if (item.colFrame == 0) {
				console.log('enterPage', item)
				return window.open(item.colPath)
			}
			let path = item.colPath
			if (!item.colPath) {
                path = '/list/' + item.colId
			}
			let query = {
				colId: item.colId,
			}
			if (item.colQuery) {
				query.colQuery = item.colQuery
			}
			if (item.colTitle) {
				query.title = item.colTitle
			}
			if (item.colListType) {
				query.type = item.colListType
			}
			console.log('item.colPath enterPage', path, item)
			this.$router.push({
				path: path,
				query,
			})
		},
		selectMenu(item) {},
		openDrawer() {
			this.drawer = !this.drawer
		},
	},
}
</script>

<style scoped lang="scss">
.header-right {
	position: absolute;
	left: 0;
	top: 20px;

	.mini-cart {
		margin-left: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.mobile-menu-icon {
		color: white;
		transform: scale(2);
	}
}

.logo {
	display: flex;
	align-items: center;
}

.title {
	height: 100%;
	font-size: 20px;
}

a {
	cursor: pointer;
}

.submenu {
	ul {
		min-width: 65px !important;
	}

	li {
		min-width: 65px !important;
		background-color: white !important;

		a {
			padding: 0 !important;
			// color: white !important;
			color: black !important;
		}
	}
}

.mainmenu nav ul li .submenu li a:hover {
	background-color: rgba(0, 85, 255, 1);
	color: white !important;
	font-weight: bold;
}

.mainmenu nav ul li a:hover {
	color: white;
}

.mainmenu nav ul li:hover {
	color: white;
}

.mainmenu nav ul li .submenu li a {
	font-weight: normal;
	text-transform: capitalize;
	padding: 8px 0 8px 30px;
	margin: 0;
	display: block;
	color: $menuTextColor !important;
}

.mainmenu nav ul li a::before {
	content: '';
	position: absolute;
	top: 0;
	right: 100%;
	width: 0;
	height: 100%;
	border-bottom: 4px solid white;
	transition: 0.2s all linear;
}

.mainmenu nav ul li a:hover::before {
	width: 100%;
	right: 0;
}

.mainmenu nav ul li a:hover ~ a::before {
	right: 0;
}
</style>
